<template>
	<view id="pageIndex">
		<view class="indexTip" :style="'top:' + (navH+50) + 'px'" :hidden="iShidden">
			<view class="tip acea-row row-between-wrapper">
				<view class="text">点击“<image src="../../static/images/spot.png"></image>”添加到我的小程序， 微信首页下拉即可访问商城。</view>
				<view class="iconfont icon-guanbi1" @click="closeTip"></view>
			</view>
		</view>
		<view class="header" :style="'margin-top:' + (navH+50) + 'px'">
			<image src="http://bbs.crmeb.net/data/attachment/block/34/3496780a2cd7e0cd996e93c4358f4ca1.jpg"></image>
		</view>
		<view class="content">
			<QSTabsWxs ref="QSTabsWxs" contentMode="vShow" refreshImage="/static/refresh.png" lineColor="#88B04B"
				activeFontColor="#000" refreshTextColor="#000" tabsFontColor="#A2A2A2" tabsBackgroundColor="#fff"
				swiperBackgroundColor="#fff" minWidth="125rpx" maxWidth="calc(100% - 240rpx)" type="setColor"
				@change="change" :height="windowHeight-topViewHeight">
				<template v-slot:tabRight>
					<view class="search flex-ac-jsa" style="color: #999999;width: 50%;">
						<view>
							<text class='iconfont icon-sousuo'></text>搜索
						</view>
						<view @tap="showFillter">
							<text class="iconfont icon-shaixuan"></text>筛选
						</view>
					</view>
				</template>
			</QSTabsWxs>
			<!-- 信息流 -->
			<homeCard :list="[20,20,20]"></homeCard>
		</view>
		<!-- 筛选 -->
		<HMFilterDropdown :menuTop="0" ref="filterDropdown" :filterData="filterData" :defaultSelected="defaultSelected"
			:updateMenuName="true" dataFormat="Object" @confirm="filterConfirm"></HMFilterDropdown>
		<tabBar :dataConfig="tabBar.default" :pagePath="'/pages/index/index'"
			@click.native="bindEdit('tabBar','default')"></tabBar>
		<view v-if="site_config && !isIframe" class="site-config" @click="goICP">{{ site_config }}</view>


	</view>
</template>

<script>
	import QSTabsWxs from '@/components/QS-tabs-wxs-list/QS-tabs-wxs-list.vue';
	import HMFilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"
	const {
		windowHeight
	} = uni.getSystemInfoSync();
	import tabBar from './components/tabBar';
	import homeCard from "../../components/home/index.vue"
	import {
		getShare,
		follow
	} from '@/api/public.js';
	// #ifdef MP
	import {
		SUBSCRIBE_MESSAGE,
		TIPS_KEY
	} from '@/config/cache';
	// #endif
	import {
		getTemlIds,
		siteConfig
	} from '@/api/api.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getDiy,
		getIndexData,
		getCouponV2,
		getCouponNewUser
	} from '@/api/api.js';
	// import { getGroomList } from '@/api/store.js';
	import {
		toLogin
	} from '@/libs/login.js';
	let app = getApp();
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			QSTabsWxs,
			tabBar,
			HMFilterDropdown
		},
		data() {
			return {
				topViewHeight: statusBarHeight + 50,
				windowHeight,
				navH: statusBarHeight,
				filterData: [{
					"name": "1",
					"type": "hierarchy", 
					"submenu": [ 
						{
							"name": "12", 
							"value": "12", 
							"submenu": [
								{
									"name": "2", 
									"value": "2",
									"submenu": [
										{
											"name": "3",
											"value": "3", 
										},{
											"name": "4",
											"value": "4", 
										}
									]
								}
							]
						}
					]
				}],
				iShidden: true,
				tabBar: {}, //导航
			};
		},
		onLoad(options) {
			let that = this;
			this.diyData();
			this.getIndexData();
			this.setOpenShare();
			// #ifdef MP
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					try {
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
					} catch {}
				}
			});
			if (this.$Cache.get(TIPS_KEY)) this.iShidden = true;
			this.getTemlIds();
			// #endif
		},
		onReady() {
			this.$refs.QSTabsWxs.setTabs([{
				name: '广州动态',
				id: '0'
			}, {
				name: '深圳动态',
				id: '1'
			}]);
		},

		onShow() {
			siteConfig().then(res => {
				this.site_config = res.data.record_No
			}).catch(err => {
				console.error(err.msg);
			});
			if (!app.globalData.isIframe) {
				uni.showTabBar();
				if (this.isLogin) {
					this.getCoupon();
				}
			}
		},
		methods: {
			filterConfirm(e){
				console.log(e);
			},
			showFillter(){
				console.log(1);
				this.$refs['filterDropdown'].togglePage(0)
			},
			change(e) {
				console.log(e);
			},
			bindEdit(name, dataName) {
				if (app.globalData.isIframe) {
					window.parent.postMessage({
							name: name,
							dataName: dataName,
							params: {}
						},
						'*'
					);
					return;
				}
			},
			// #ifdef MP
			getTemlIds() {
				let messageTmplIds = wx.getStorageSync(SUBSCRIBE_MESSAGE);
				if (!messageTmplIds) {
					getTemlIds().then(res => {
						if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
					});
				}
			},
			// #endif
			goICP() {
				// #ifdef H5
				window.open('http://beian.miit.gov.cn/');
				// #endif
				// #ifdef MP
				uni.navigateTo({
					url: `/pages/annex/web_view/index?url=https://beian.miit.gov.cn/`
				});
				// #endif
			},
			onLoadFun() {},
			diyData() {
				let that = this;
				getDiy().then(res => {
					let data = res.data;
					that.headerSerch = data.headerSerch;
					that.swiperBg = data.swiperBg;
					that.menus = data.menus;
					that.news = data.news;
					that.activity = data.activity;
					that.scrollBox = data.scrollBox;
					that.titles = data.titles;
					that.goodList = data.goodList;
					that.tabBar = {
						"tabBar": {
							"id": "default",
							"default": {
								"isShow": {
									"val": true
								},
								"tabBarList": {
									"title": "图片建议宽度81*81px",
									"list": [{
											"name": "首页",
											"imgList": [
												"/admin/img/foo1-01.003b4be4.png",
												""
											],
											"link": "/pages/index/index"
										},
										{
											"name": "分类",
											"imgList": [
												"",
												""
											],
											"link": "/pages/goods_cate/goods_cate"
										},
										{
											"name": "购物车",
											"imgList": [
												"/admin/img/foo4-01.b50f04b1.png",
												""
											],
											"link": "/pages/order_addcart/order_addcart"
										},
										{
											"name": "我的",
											"imgList": [
												"",
												""
											],
											"link": "/pages/user/index"
										},
										{
											"name": "购物车",
											"imgList": [
												"/admin/img/foo4-01.b50f04b1.png",
												""
											],
											"link": "/pages/order_addcart/order_addcart"
										}
									]
								}
							}
						}
					};
					that.customerService = data.customerService;
					that.picTxt = data.picTxt;
					that.bargain = data.bargain;
					that.combination = data.combination;
					that.adsRecommend = data.adsRecommend;
					that.seckill = data.seckill;
					that.coupon = data.coupon;
					// 精品推荐
					// let recommend = that.goodList.aa;
					// that.isShowModule = item.isShow.val;
					// that.selectType = item.tabConfig.tabVal;
					// that.$set(that, 'selectId', item.selectConfig.activeValue);
					// that.salesOrder = item.goodsSort.type == 1 ? 'desc' : '';
					// that.priceOrder = item.goodsSort.type == 2 ? 'asc' : '';
					// that.ids = item.goodsList.ids.join(',');
					// that.numConfig = item.numConfig.val;
					// that.page = 1;
					// that.loadend = false;
					// that.tempArr = [];
					// that.productslist();
					// console.log('ddddddd',that.goodList.aa);
				});
			},
			getIndexData() {
				getIndexData().then(res => {
					this.subscribe = res.data.subscribe;
					// #ifdef H5
					localStorage.setItem("itemName", res.data.site_name);
					// #endif
					uni.setNavigationBarTitle({
						title: res.data.site_name
					});
				});
			},
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				getShare().then(res => {
					let data = res.data.data;
					this.shareInfo = data;
					// #ifdef H5
					let url = location.href;
					if (this.$store.state.app.uid) {
						url = url.indexOf('?') === -1 ? url + '?spread=' + this.$store.state.app.uid : url +
							'&spread=' + this.$store.state.app.uid;
					}
					if (that.$wechat.isWeixin()) {
						let configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: url,
							imgUrl: data.img
						};
						that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData'],
							configAppMessage);
					}
					// #endif
				});
			}
		},
		onReachBottom: function() {
			// this.$refs.recommend.productslist();
			// this.getGroomList();
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage: function() {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {
				title: this.shareInfo.title,
				path: '/pages/index/index',
				imageUrl: this.shareInfo.img
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			return {
				title: this.shareInfo.title,
				imageUrl: this.shareInfo.img
			};
		},
		// #endif
	};
</script>

<style lang="scss">
	page {
		background: #fff;
		font-family: Source Han Sans CN;
	}

	.header {
		background-color: #fff;
		width: 95%;
		height: 260rpx;
		margin: 0 auto 10px;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
	}

	.swiperCon {
		margin: 20rpx 0 !important;

		/* #ifdef MP */
		/deep/.swiperBg {
			margin: 20rpx 0 !important;
		}

		/* #endif */
		/deep/.swiper {
			swiper,
			.swiper-item,
			image {
				height: 190rpx !important;
			}
		}
	}

	.site-config {
		margin: 40rpx 0;
		font-size: 24rpx;
		text-align: center;
		color: #666;

		&.fixed {
			position: fixed;
			bottom: 69px;
			left: 0;
			width: 100%;
		}
	}

	/* #ifdef MP */
	.indexTip {
		position: fixed;
		right: 42rpx;
		z-index: 1000;

		.tip {
			width: 400rpx;
			border-radius: 6rpx;
			background-color: #fff;
			padding: 15rpx 22rpx;
			position: relative;

			&::before {
				content: "";
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-bottom: 17rpx solid #fff;
				position: absolute;
				top: -14rpx;
				right: 95rpx;
			}
		}

		.text {
			font-size: 22rpx;
			color: #333;
			width: 320rpx;

			image {
				width: 30rpx;
				height: 16rpx;
				display: inline-block;
			}
		}

		.iconfont {
			color: #cdcdcd;
			font-size: 32rpx;
		}
	}

	/* #endif */
	/* #ifdef H5 */
	.follow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.36);
		height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		padding: 0 30rpx;
		z-index: 100000;

		.iconfont {
			font-size: 30rpx;
			margin-left: 29rpx;
		}

		.bnt {
			width: 160rpx;
			height: 50rpx;
			background-color: #E93323;
			border-radius: 25rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}

	.followCode {
		.mask {
			z-index: 10000;
		}

		.pictrue {
			width: 500rpx;
			height: 720rpx;
			border-radius: 12px;
			left: 50%;
			top: 50%;
			margin-left: -250rpx;
			margin-top: -360rpx;
			position: fixed;
			z-index: 10001;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	.content {
		background: #F6F6F6;
	}
</style>
